<html>
    <head>
        <meta charset="utf-8" />
        <h1>
            帮助(help)
        </h1>
        <h6>
             本文档采用html + css
        </h6>
        <div class="line">
            <p>-----------------------------------------------------------------------</p>
            <p>-------------------------------=-----=----------------------------------</p>
        </div>
    </head>
    <body>
        <div class= "how">
            <h2 class="big">操作方法</h2>
            <div class="line">
                <p>-------------------------------=-----=----------------------------------</p>
            </div>
            <li>无需python环境，直接双击打开</li>
            <br>
            <img src= "./image/help/first-page.png" height="412" width="666.666">
            <br>
            <li>点击任意位置，进入下一页</li>
            <br>
            <img src= "./image/help/second-page.png" height="412" width="666.666">
            <br>
            <li>选择左边的按键，开始创作</li>
            <br>
            <img src= "./image/help/third-page.png" height="412" width="666.666">
            <br>
            <li>可以选择想要的节奏，选择后点击“下一步”（或由AI自动您选择）</li>
            <li>节奏名称皆为意大利文，建议使用“快速”栏的节奏（不然曲子可能很难听哦）</li>
            <br>
            <img src= "./image/help/fourth-page.png" height="412" width="666.666">
            <br>
            <li>
                选择调性，前两排为大调，后两排为小调
                <p>默认C大调（a小调）</p>
            </li>
            <img src="./image/help/fifth-page.png" height="412" width="666.666">
            <br>
            <img src="./image/help/sixth-page.png" height="412" width="666.666">
            <br>
            <li>给乐曲起个响亮的英文名吧</li>
            <br>
            <img src="./image/help/seventh-page.png" height="412" width="666.666">
            <br>  <br>
            <li>直接点击播放，聆听AI创作的曲目吧</li>
            <h3>想再来一首？重新进入吧！</h3>
            <br>
        </div>

        

        <div class="offer">
            <br>
            <h2 class="big">推荐组合</h2>
            <div class="line">
                <p>-------------------------------=-----=----------------------------------</p>
            </div>
            <h3>有太多的组合了，你能发现更美妙的组合呢</h3>
            <h3></h3>
            <h4 class="title">节奏推荐</h4>
            <ol type="I" class="list">
                <li>ASSAI       (144)      </li>
                <li>VIVACE      (160)  快板</li>
                <li>PRESTO      (184)  急板</li>
                <li>无专有名称   (200)     </li>
                <li>Prestissimo  (208)  狂板</li>
                <li>无敌快       (300)      </li>
                <li>变态快       (500)      </li>
            </ol>
            <br>
            <h4 class="title">调性推荐</h4>
            <ol type="I" class="list">
                <h5 class="small-title">大调</h5>
                <li>C大调</li>
                <li>G大调</li>
                <li>A大调</li>
                <li>E大调</li>
                <li>#F大调</li>
                <li>#C大调</li>
                <li>F大调</li>
                <li>bB大调</li>
                <li>bA大调</li>
                <li>bD大调</li>
                <h5 class="small-title">小调</h5>
                <li>a小调</li>
                <li>e小调</li>
                <li>f小调</li>
                <li>#g小调</li>
                <li>#d小调</li>
                <li>#a小调</li>
                <li>d小调</li>
                <li>#c小调</li>
                <li>#f小调</li>
                <li>bb小调</li>
            </ol>
            <br>
        </div>
        
        <div class="calculate">
            <br>
            <h2 class="big">算法简介</h2>
            <div class="line">
                <p>-------------------------------=-----=----------------------------------</p>
            </div>
            <h4>本算法为我自创</h4>
            <ol type="I" class="list">
                <li>分析几首巴洛克时期曲目，总结格式，（巴洛克时期有严格格式，可在上再总结）</li>
                <br>
                <li>根据巴洛克时期严谨的乐理规则，创建主题（主旋律），套入格式，得到音乐</li>
                <br>
                <li>加上乐理的解决，播放乐曲</li>
                <br>
            </ol>
        </div>
        <br>
        <br>
    </body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <style>
        head{
            text-align: center;
            font-family:inherit;
            background-color: ghostwhite;
        }
        
        body{
            text-align: center;
            font-family:cursive;
            background-color: ghostwhite;
        }
        div.line{
            color:darkblue;
            font-size: 20px;
            
        }
        h2.big{
            font-size: 30px;
            color: firebrick;
        }
        div.how{
            color:dodgerblue;
            font-size: 20px;
        }
        div.offer{
            color:darkgoldenrod;
            font-size: 19px;
        }
        ol.list{
            color:blue;
            font-size: 20px; 
            list-style-position:inside;
        }
        h4.title{
            color: darkblue;
            font-size: 22px; 
        }
        h5.small-title{
            color: burlywood;
            font-size: 21;
        }
        div.calculate{
            color:darkgoldenrod;
            font-size: 19px;
        }
    </style>
    
</html>